<template>
	<view class="content">
		<view style="font-size: 45rpx;text-align: center;">点赞数排名</view>
		<view style="margin-bottom: 30rpx;" v-for="(item,index) in data_arr">第{{index+1}}:{{item.title}}</view>
		<view class="chart">
			<view class="chart_item" v-for="item in data_arr">
				<view :style="{height:item.likeNum/top*100+'%'}"><text>{{item.likeNum}}</text></view>
			</view>
		</view>
		<view class="text">
			<view v-for="(item,index) in data_arr">第{{index+1}}</view>
		</view>
	</view>
</template>

<script>
	import {http} from "../../utils/request.js"
	export default{
		data(){
			return {
				data_arr:[],
				top:""
			}
		},
		created() {
			const that=this
			uni.showLoading({
				title:"加载中，请稍等..."
			})
			http({
				url:"/prod-api/press/press/list",
			}).then((res)=>{
				let temp_arr=res.data.rows
				temp_arr=temp_arr.sort((a,b)=>{
					return b.likeNum-a.likeNum
				})
				for(let i=0;i<5;i++){
					that.data_arr.push(temp_arr[i])
				}
				that.top=Math.ceil(that.data_arr[0].likeNum/10)*10+300
				that.$nextTick(()=>{
					uni.hideLoading()
				})
			})
			
		}
		
	}
</script>

<style>
	.content{
		width: 95%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}
	.chart{
		display: flex;
		height: 300rpx;
		border-bottom: 1px solid black;
	}
	.chart>*{
		flex: 1;
	}
	.chart_item{
		position: relative;
		height: 300rpx;
	}
	.chart_item>view{
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 30%;
		height: 0%;
		transition: height 1.5s;
		background-image: linear-gradient(to bottom right, #7fffee, #f4a4d1);
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		text-align: center;
		margin: 0 auto;
	}
		
	.chart_item>view>text{
		position: absolute;
		transform: translate(-50%,-100%);
	}
	.text{
		display: flex;
		
	}
	.text>*{
		flex: 1;
		text-align: center;
	}
</style>